<!--
*Author：富行天下团队
 *
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/mall/Mall_small_user_contact.js此处编写
 -->
<template>
  <div style="background: white; margin-top: 15px">
    <el-tabs type="border-card" style="height: 400px">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 订单项目</span>
        <vol-table
          ref="tableList"
          :loadKey="true"
          :columns="columns"
          :pagination-hide="false"
          :height="300"
          :defaultLoadPage="false"
          url="/api/VSmallOrders/getDetailPage"
          :columnIndex="false"
          :index="true"
          :click-edit="true"
        ></vol-table>
      </el-tab-pane>
      <!-- <el-tab-pane :lazy="true" label="套票明细"></el-tab-pane> -->
    </el-tabs>
    <VolBox
      :width="1000"
      :height="300"
      :footer="false"
      :model.sync="modifyOptionsEmail.model"
      title="票明细"
    >
      <div style="padding:10px;20px;">
        <vol-table
          ref="table2List"
          :loadKey="true"
          :columns="columns2"
          :pagination-hide="false"
          @loadBefore="loadBefore"
          :height="300"
          :defaultLoadPage="false"
          url="/api/VSmallOrders/GetOrderItemNotes"
          :columnIndex="false"
          :index="true"
          :click-edit="true"
        ></vol-table>
      </div>
    </VolBox>
    <VolBox
      :width="1000"
      :height="300"
      :footer="false"
      :model.sync="modifyOptionsEmails.model"
      title="详情记录"
    >
      <div style="padding:10px;20px;">
        <vol-table
          ref="table3List"
          :loadKey="true"
          :columns="columns3"
          :pagination-hide="false"
          @loadBefore="loadBefore"
          :height="300"
          :defaultLoadPage="false"
          url="/api/VSmallOrders/GetOrderItemNotesRecord"
          :columnIndex="false"
          :index="true"
          :click-edit="true"
        ></vol-table>
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolForm from "@/components/basic/VolForm.vue";
var vueParam = {
  components: {
    VolForm: VolForm,
    VolTable,
    VolBox: () => import("@/components/basic/VolBox.vue")
  },
  methods: {
    loadBefore(params, callback) {
      params.wheres = [
        { name: "order_item_id", value: this.paramsId, displayType: "text" }
      ];
      return callback(true);
    },
    opens(row) {
      let that = this;
      that.paramsId = row.id;
      that.modifyOptionsEmails.model = true;
      let where = {
        wheres: [
          { name: "order_item_id", value: that.paramsId, displayType: "text" }
        ]
      };
      this.$store.getters
        .data()
        .order.$refs.gridFooter.$refs.table3List.load(where); //table2List.load(where)
    },
    getRender() {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: e => {
                  // if(row!=""){
                    this.open(row);
                  // }else{
                    
                  // }
                
                }
              }
            },
            "详细       "
          ),
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: e => {
                  this.opens(row);
                }
              }
            },
            "详情记录"
          )
        ]);
      };
    },
    open(row) {
      console.log(row);
      let that = this;
      that.paramsId = row.id;
      that.modifyOptionsEmail.model = true;
      let where = {
        wheres: [
          { name: "order_item_id", value: that.paramsId, displayType: "text" }
        ]
      };
      this.$store.getters
        .data()
        .order.$refs.gridFooter.$refs.table2List.load(where); //table2List.load(where)
    }
    // },
    // saveEmail() {
    // if (!this.$refs.Email.validate()) return;
    // }
  },

  data() {
    return {
      // 分页需要的id
      paramsId: "",
      modifyOptionsEmail: {
        model: false
      },
      modifyOptionsEmails: {
        model: false
      },
      tableData: [],
      columns: [
        {
          field: "id",
          title: "主键",
          type: "string",
          width: 120,
          hidden: true,
          readonly: true,
          require: true,
          align: "left"
        },
        //{field:'goods_id',title:'商品标题',type:'string',width:120,align:'left'},
        {
          field: "title",
          title: "商品名称",
          type: "string",
          width: 120,
          align: "left",
          fixed: "left"
        },
        //{field:'pic_path',title:'商品图片地址',type:'img',width:120,align:'left'},
        {
          field: "settlement_price",
          title: "商品单价",
          type: "decimal",
          width: 120,
          align: "left"
        },
        {
          field: "num",
          title: "商品购买数量",
          type: "int",
          width: 120,
          align: "left"
        },
        {
          field: "settlement_total_fee",
          title: "商品总金额",
          type: "decimal",
          width: 120,
          align: "left"
        },
        // {field:'status',title:'状态',type:'string',width:120,align:'left'},
        // {field:'order_id',title:'订单id',type:'string',width:120,align:'left'},
        {
          field: "paydepositPrice",
          title: "押金",
          type: "string",
          width: 120,
          align: "left",
          sortable: true
        },
        {
          field: "name",
          title: "使用人",
          type: "string",
          width: 120,
          align: "left",
          sortable: true
        },
        {
          field: "phone",
          title: "使用人电话",
          type: "string",
          width: 120,
          align: "left",
          sortable: true
        },
        {
          field: "playStartDate",
          title: "游玩开始时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true
        },
        {
          field: "playEndDate",
          title: "游玩结束时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true
        },
        {
          field: "refundOfTime",
          title: "退款申请时间",
          type: "string",
          width: 160,
          align: "left"
        },
        {
          field: "refundTime",
          title: "退款时间",
          type: "string",
          width: 160,
          align: "left"
        },
        {
          field: "confirmationNo",
          title: "确认号",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "auxiliaryConfirmationNo",
          title: "辅助确认号",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "external_online_order_number",
          title: "外部线上订单号",
          type: "string",
          width: 210,
          align: "left"
        },
        {
          field: "external_offline_order_number",
          title: "外部线下订单号",
          type: "string",
          width: 290,
          align: "left"
        },
        //{field:'pay_type',title:'支付方式',type:'string',width:120,align:'left'},
        //{field:'settlement_total_fee',title:'结算总价',type:'decimal',width:120,align:'left'},
        {
          field: "processingStatus",
          title: "处理状态",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "childrenNumber",
          title: "订单子项单号",
          type: "string",
          width: 160,
          align: "left"
        },
        //{field:'settlement_price',title:'结算单价',type:'decimal',width:120,align:'left'},
        {
          field: "modifyDate",
          title: "修改时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true
        },
        //{field:'modifierID',title:'修改人id',type:'int',width:120,align:'left'},
        {
          field: "modifier",
          title: "修改人名称",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true
        },
        //{field:'createID',title:'创建人id',type:'int',width:120,hidden:true,align:'left'},
        {
          field: "creator",
          title: "创建人名称",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "Render",
          title: "操作",
          fixed: "right",
          width: 160,
          render: this.getRender()
        }
        // {field:'Render',title: "操作",fixed: "right",width: 160,render: this.getRenders(),},
        //  {field:'spare15',title:'备用',type:'string',width:120,align:'left'},
        //  {field:'spare13',title:'备用',type:'string',width:120,align:'left'},
        //  {field:'spare12',title:'备用',type:'string',width:120,align:'left'},
        //  {field:'spare11',title:'备用',type:'string',width:120,align:'left'},
        //  {field:'spare10',title:'备用',type:'string',width:120,align:'left'},
        //  {field:'spare9',title:'备用',type:'string',width:120,align:'left'}
      ],
      columns2: [
        {
          field: "id",
          title: "主键",
          type: "string",
          width: 120,
          hidden: true,
          readonly: true,
          require: true,
          align: "left"
        },
        //{field:'goods_id',title:'商品标题',type:'string',width:120,align:'left'},
        {
          field: "order_item_id",
          title: "订单项号",
          type: "string",
          width: 210,
          align: "left",
          fixed: "left"
        },
        //{field:'pic_path',title:'商品图片地址',type:'img',width:120,align:'left'},
        {
          field: "ticketNumber",
          title: "线下订单号",
          type: "decimal",
          width: 290,
          align: "left"
        },
        {
          field: "status",
          title: "状态",
          bind: { key: "state_Type", data: [] },
          type: "int",
          width: 80,
          align: "left"
        },
        {
          field: "quantity",
          title: "数量",
          type: "decimal",
          width: 80,
          align: "left"
        },
        {
          field: "dateTime",
          title: "发生时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true
        }
      ],
      columns3: [
        {
          field: "id",
          title: "主键",
          type: "string",
          width: 120,
          hidden: true,
          readonly: true,
          require: true,
          align: "left"
        },
        //{field:'goods_id',title:'商品标题',type:'string',width:120,align:'left'},
        {
          field: "order_item_id",
          title: "订单项号",
          type: "string",
          width: 210,
          align: "left",
          fixed: "left"
        },
        //{field:'pic_path',title:'商品图片地址',type:'img',width:120,align:'left'},
        {
          field: "ticketNumber",
          title: "线下订单号",
          type: "decimal",
          width: 290,
          align: "left"
        },
        {
          field: "status",
          title: "状态",
          bind: { key: "state_Type", data: [] },
          type: "int",
          width: 80,
          align: "left"
        },
        {
          field: "quantity",
          title: "数量",
          type: "decimal",
          width: 80,
          align: "left"
        },
        {
          field: "dateTime",
          title: "发生时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true
        }
      ]
    };
  }
};
export default vueParam;
</script>
